<span class="col-no-gutters badge-container edit-mode">
    <strong class="badge green-background">
        {{ component.max_value|round(decimal_precision) }} {{ extra_credit_points > 0 ? '(+' ~ extra_credit_points|round(decimal_precision) ~ ')' }} {{ penalty_points > 0 ? '(-' ~ penalty_points|round(decimal_precision) ~ ')' : '' }}
    </strong>
</span>

<span class="component-title col-no-gutters">
    <b><span class="component-title-text">{{ component.title|escape }}</span></b>
</span>

{% if component.page > 0 %}
    <span class="page-number-view col-no-gutters">
        <i>(Page # <span class="component-page-number-text">{{ component.page }}</span>)</i>
    </span>
{% endif %}

<span class="divider col"> </span>

<span class="col-no-gutters">
    {# Saving status #}
    {% include "SavingTools.twig" with {
        'show_save_tools': show_mark_list,
        'cancel_on_click': 'onCancelComponent(this)'
    } only %}
</span>

<span class="col-no-gutters reorder-component-container" onclick="event.stopPropagation()" aria-label="Click and drag to reorder components">
    <i class="fas fa-ellipsis-v" title="Click and drag to reorder components"></i>
</span>
<span class="col-no-gutters" onclick="onDeleteComponent(this); event.stopPropagation()">
    <i class="fas fa-trash" title="Delete this component"></i>
</span>
